<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>async以及promise的应用</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            transition: transform 0.5s ease 0s;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <div class="btn">
        <button>点击实现一个W的走位</button>
        <button>点击实现一个z的走位</button>
    </div>

    <script>
        var oBox = document.getElementById('box');
        var aBtns = document.getElementsByTagName('button');
        var globalReslove = null;
        oBox.addEventListener('transitionend', () => { // 监听动画完成的事件
            if (globalReslove) {
                globalReslove();
            }
        });

        function move(x, y) { // 自行封装一个返回promise的方法，x，y分别代表要移动的横向和纵向的距离
            return new Promise((reslove, reject) => {
                // 请补全相关的逻辑代码
                oBox.style.transform = `translate(${x}px, ${y}px)`;
                globalReslove = reslove;
            })
        }

        //实现w走位
        let w = [
            {x:0,y:0},
            {x:150,y:150},
            {x:300,y:10},
            {x:450,y:150},
            {x:600,y:10},
        ]
        let z = [
            {x:0,y:0},
            {x:150,y:10},
            {x:10,y:150},
            {x:150,y:150}
        ]
        aBtns[0].onclick = async () => {
            for(let i of w){
                await move(i.x, i.y)
            }
            
        }
        aBtns[1].onclick = async () => {
            for(let i of z){
                await move(i.x, i.y)
            }
        }
    </script>
</body>

</html>